<section *ngIf="title" class="ti3-form-title" [id]="appendId('title')">{{title}}</section>
<ng-container *ngIf="!useGrid else gridLayout">
  <table style="max-width: 100%" class="ti3-form" [ngStyle]="containterObj" [id]="appendId('table')">
    <tbody [ngClass]="{'ti3-text-form': type === textType}">
      <tr
        *ngFor="let groupedItem of groupedItems;index as groupIndex;"
        [ngClass]="{ 'ti3-form-list' : groupedItems.length === (groupIndex + 1)}"
      >
        <ng-container *ngFor="let item of groupedItem;index as i;trackBy: trackByFn">
          <ng-container *ngTemplateOutlet="isVertical&&type!==textType ? topAlign : leftAlign; context: {$implicit: item}"> </ng-container>
        </ng-container>
      </tr>
      <tr *ngFor="let item of btnItems;">
        <td *ngIf="!isVertical"></td>
        <td *ngIf="!isVertical"></td>
        <td
          [tiInclude]="item.btnContent"
          [ngStyle]="item.verticalAlignObj"
          class="ti3-form-button-item"
          [attr.colspan]="item.btnColspan"
        ></td>
      </tr>
    </tbody>
  </table>

  <ng-template #leftAlign let-item>
    <td
      [ngStyle]="item.verticalAlignObj"
      [ngClass]="{'ti3-form-require': item.required,
                        'ti3-form-require-container': requiredSpace }"
      [attr.rowspan]="item.rowspan"
    >
      <span [hidden]="!item.required" class="ti3-icon ti3-icon-staricon"></span>
    </td>
    <td
      [tiInclude]="item.itemLabel"
      class="ti3-form-label ti3-text-form-label"
      [attr.rowspan]="item.rowspan"
      *ngIf="item.hasLabel"
      [ngStyle]="item.labelStyle"
    ></td>
    <td
      [tiInclude]="item.element"
      [attr.colspan]="(item.colspan - 1) * 4 + 1 + (item.hasLabel ? 0 : 1)"
      [attr.rowspan]="item.rowspan"
      [ngStyle]="item.contentStyle"
      class="ti3-form-content ti3-text-form-content"
    ></td>
    <td [ngStyle]="{width: item.gapWidth}" [attr.rowspan]="item.rowspan"></td>
  </ng-template>

  <ng-template #topAlign let-item>
    <td [attr.rowspan]="item.rowspan" [attr.colspan]="(item.colspan - 1) * 2 + 1">
      <div class="ti3-form-top-label">
        <span [hidden]="!item.required" class="ti3-icon ti3-icon-staricon ti3-form-top-require"></span>
        <span [tiInclude]="item.itemLabel" class="ti3-form-top-text" *ngIf="item.hasLabel" [ngStyle]="item.labelStyle"></span>
      </div>
      <div [tiInclude]="item.element" [ngStyle]="item.contentStyle" class="ti3-form-content"></div>
    </td>
    <td [ngStyle]="{width: item.gapWidth}" [attr.rowspan]="item.rowspan"></td>
  </ng-template>
</ng-container>

<ng-template #gridLayout>
  <div class="ti3-form">
    <div class="ti3-form-grid-container" [ngStyle]="containterObj">
      <div
        *ngFor="let item of items;index as i;trackBy: trackByFn"
        [ngClass]="{ 'ti3-text-form': type === textType }"
        [ngStyle]="item.itemStyle"
      >
        <ng-container *ngTemplateOutlet="isVertical&&type!==textType ? gridTopAlign : gridLeftAlign; context: {$implicit: item, index: i}">
        </ng-container>
      </div>
    </div>
    <div *ngFor="let item of btnItems;" class="ti3-form-button-item" [ngStyle]="buttonStyle">
      <div [tiInclude]="item.btnContent" [ngStyle]="item.verticalAlignObj"></div>
    </div>
  </div>

  <ng-template #gridLeftAlign let-item let-i="index">
    <div
      [ngStyle]="item.verticalAlignObj"
      [ngClass]="{'ti3-form-require': item.required}"
      class="ti3-form-require-container"
      *ngIf="getRequire(item, i)"
    >
      <ti-icon [hidden]="!item.required" name="staricon"></ti-icon>
    </div>
    <div
      [tiInclude]="item.itemLabel"
      class="ti3-form-label ti3-text-form-label"
      *ngIf="item.hasLabel"
      [ngStyle]="item.labelStyle"
      style="display: inline-block"
    ></div>
    <div
      [tiInclude]="item.element"
      [ngStyle]="item.contentStyle"
      class="ti3-form-content ti3-text-form-content"
      style="display: inline-block"
    ></div>
  </ng-template>

  <ng-template #gridTopAlign let-item>
    <div class="ti3-form-top-label">
      <span [hidden]="!item.required" class="ti3-icon ti3-icon-staricon ti3-form-top-require"></span>
      <span [tiInclude]="item.itemLabel" class="ti3-form-top-text" *ngIf="item.hasLabel" [ngStyle]="item.labelStyle"></span>
    </div>
    <div [tiInclude]="item.element" [ngStyle]="item.contentStyle" class="ti3-form-content"></div>
  </ng-template>
</ng-template>
